<!--
 * @Author: 谢小康 2170673706@qq.com
 * @Date: 2023-11-23 20:13:56
 * @LastEditors: 谢小康 2170673706@qq.com
 * @LastEditTime: 2024-02-06 14:15:59
 * @FilePath: \my_bolg_admin\my_admin\src\view\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
    <h1 class="pl-10 box-border h-8 w-full border-dashed border-b-2">首页</h1>
    <div class="h-auto w-full p-10 box-border cc">
        <el-row :gutter="12">
            <el-col :span="6">
                <el-card shadow="hover" class="flex justify-around">
                    <svg t="1700823467120" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2731" width="48" height="48">
                        <path
                            d="M811.705761 1024H212.294239c-93.1199 0-174.823046-87.570975-174.823046-187.387854V162.322018C37.471193 69.776145 112.604921 0 212.294239 0H596.190595l7.015883 5.93161c111.74388 95.479788 185.857116 170.741078 279.614824 266.093304 29.65805 30.040735 61.165743 62.122454 96.436499 97.393211l7.271006 7.334787v459.859234c-0.063781 99.816879-81.703145 187.387854-174.823046 187.387854zM212.294239 49.94033c-72.391155 0-124.882716 47.261538-124.882716 112.381688v674.290128c0 71.94469 59.507443 137.383743 124.882716 137.383743h599.411522c65.311492 0 124.882716-65.439053 124.882716-137.383743V397.417876c-32.528184-32.464404-61.73977-62.250016-89.356836-90.377328-90.951355-92.418312-163.278729-165.957521-269.601245-257.163999H212.294239z"
                            fill="#4D4D4D" p-id="2732"></path>
                        <path
                            d="M936.588477 449.526752h-212.326129c-99.753099 0-187.324073-81.703145-187.324073-174.823046V49.94033a25.002055 25.002055 0 0 1 49.94033 0v224.763376c0 65.311492 65.502834 124.882716 137.383743 124.882716h212.326129a25.002055 25.002055 0 1 1 0 49.94033z"
                            fill="#4D4D4D" p-id="2733"></path>
                    </svg>
                    文章数:
                    <span>{{siteinfo.articleunm}}</span>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="flex justify-around">
                    <svg t="1700823676411" class="icon" viewBox="0 0 1228 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3732" width="48" height="48">
                        <path
                            d="M614.4 1024C276.48 1024 0 798.72 0 512S276.48 0 614.4 0s614.4 225.28 614.4 512-276.48 512-614.4 512z m0-102.4c286.72 0 512-184.32 512-409.6s-225.28-409.6-512-409.6S102.4 286.72 102.4 512s225.28 409.6 512 409.6z m0-153.6c-143.36 0-256-112.64-256-256s112.64-256 256-256 256 112.64 256 256-112.64 256-256 256z m0-102.4c87.04 0 153.6-66.56 153.6-153.6s-66.56-153.6-153.6-153.6-153.6 66.56-153.6 153.6 66.56 153.6 153.6 153.6z"
                            fill="#999999" p-id="3733"></path>
                    </svg>
                    浏览数:
                    <span>{{siteinfo.view}}</span>

                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="flex justify-around">
                    <svg t="1700823759649" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4713" width="48" height="48">
                        <path
                            d="M495.961183 732.904192L163.33007 980.590594v-958.842307h665.262226v958.842307z m52.038987-69.951904l193.424644 144.044264V309.706065H250.541136v497.290487l193.38106-144.044264 52.038987-38.78953z m193.424644-440.195787V108.959353H250.541136v113.57923z"
                            p-id="4714"></path>
                    </svg>
                    标签数:
                    <span>{{siteinfo.lablesunm}}</span>

                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="flex justify-around">
                    <svg t="1700824000190" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6611" width="48" height="48">
                        <path
                            d="M882.607224 620.289332c-32.233122-46.50108-75.778894-81.46643-126.399805-101.611236 22.323425-15.70468 41.104163-36.645618 54.679343-61.067844 15.711843-28.26781 24.01802-60.572564 24.01802-93.420693 0-102.397135-79.284741-185.704492-176.739307-185.704492-13.83817 0-25.097608 11.258415-25.097608 25.097608 0 13.855566 11.259438 25.128307 25.097608 25.128307 69.742411 0 126.482693 60.775178 126.482693 135.478578 0 74.719772-56.739259 135.50723-126.482693 135.50723-13.83817 0-25.097608 11.265578-25.097608 25.112957l0 0.1361c0 13.855566 11.259438 25.128307 25.097608 25.128307 125.46348 0 227.536226 108.816335 227.536226 242.568594 0 13.872962 11.285021 25.159006 25.157983 25.159006 13.83817 0 25.097608-11.286044 25.097608-25.159006C935.958316 730.243583 917.509129 670.644183 882.607224 620.289332z"
                            p-id="6612"></path>
                        <path
                            d="M623.157147 577.673745c-26.348088-18.662035-55.000662-33.399691-85.316108-43.895743 64.020082-38.906102 103.316064-108.150162 103.316064-183.412286 0-118.333082-96.263437-214.604706-214.588333-214.604706-118.358665 0-214.649731 96.271624-214.649731 214.604706 0 40.289612 11.282974 79.585593 32.630165 113.642247 18.054191 28.803 42.605354 52.879348 71.567989 70.318532-30.826076 10.523681-59.94937 25.424042-86.697571 44.369533-29.125341 20.629853-54.761208 45.569872-76.194356 74.126254-44.566008 59.375296-68.122517 130.018216-68.122517 204.28978 0 13.83817 11.258415 25.097608 25.097608 25.097608 13.855566 0 25.128307-11.259438 25.128307-25.097608 0-77.456093 30.202882-150.434198 85.043908-205.489094 54.711066-54.924937 127.125329-85.206614 203.921389-85.283362 2.535753 0.225127 5.117554 0.047072 7.631818-0.515746l1.991354-0.446162c74.719772 1.51347 144.95337 31.659047 198.329021 85.261872 54.815443 55.04978 85.003999 128.013559 85.003999 205.448162 0 13.83817 11.272741 25.097608 25.128307 25.097608 13.83817 0 25.097608-11.259438 25.097608-25.097608 0-74.271564-23.556509-144.913461-68.121494-204.28978C677.918355 623.243617 652.282488 598.303598 623.157147 577.673745zM426.56877 186.002274c90.629113 0 164.362418 73.733305 164.362418 164.363442 0 90.638323-73.733305 164.378791-164.362418 164.378791-90.647533 0-164.393117-73.740468-164.393117-164.378791C262.17463 259.735579 335.921237 186.002274 426.56877 186.002274z"
                            p-id="6613"></path>
                    </svg>
                    友链数:
                    <span>{{siteinfo.friendnum}}</span>

                </el-card>
            </el-col>
        </el-row>
        <el-row class="mt-3">
            <el-col :span="12">
                <div id="main" style="width: 400px;height:270px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="over" style="width: 400px;height:270px;"></div>
            </el-col>
        </el-row>

    </div>
</template>

<script setup>
import echarts from "@/util/echarts.js"
import { onMounted, ref } from "vue"
import { getdata } from "@/api/users.js"
import {deepClone} from "@/util/index.js"
let siteinfo = ref({
    articletime: [],
    articleunms: [],
    articleunm: "",
    friendnum : "", 
    lablesunm : "", 
    view: "",
    labletime:[]
})
onMounted(async () => {
    let res = await getdata()
    if (res.data.status == 200) {
        let data = res.data.data
        siteinfo.value = deepClone(data)
        siteinfo.value.labletime = siteinfo.value.labletime.map((item)=>{
            return {
                name:item.name,
                value:item.num
            }
        })
        let articletime = siteinfo.value.articletime
        siteinfo.value.articletime =articletime.map(item=>{
            return item.time.split("-").pop()
        }) 
        siteinfo.value.articleunms =articletime.map(item=>{
            return item.num
        })
    }
    create()
})
function create() {
    var myChart = echarts.init(document.getElementById('main'));
    var myPie = echarts.init(document.getElementById('over'));
    myChart.setOption({
        title: {
            text: '文章数'
        },
        tooltip: {},
        xAxis: {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            data:siteinfo.value.articletime
        },
        yAxis: {},
        series: [
            {
                name: '文章数',
                type: 'line',
                data: siteinfo.value.articleunms
            },
            {
                name: '文章数',
                type: 'bar',
                data: siteinfo.value.articleunms
            }
        ]
    });
    myPie.setOption({
        title: {
            text: '标签的文章数'
        },
        series: [
            {
                type: 'pie',
                data: siteinfo.value.labletime
            }
        ]
    })
}
</script>

<style lang="css" scoped>
.cc {
    background-color: #fff;
}

.icon {
    display: inline;
}
</style>